<template>
  <div class="el-main">
    <el-container>
     <!-- -->
     <!-- <el-aside width="300px">
        <el-tree class="tree_area" :data="menuTree" node-key="id" ref="tree" :expand-on-click-node="clickNode"
                 :props="defaultProps" :highlight-current="highlightCurrent" @node-click="handleNodeClick"></el-tree>
      </el-aside>-->
      <el-container>
        <el-main class="el-main">
          <el-row>
            <el-col :span="1">
              <el-button type="primary" @click="toAdd()">  <i class="el-icon-circle-plus-outline"></i>新建</el-button>
            </el-col>
          </el-row>
          <el-row style="padding-top: 10px">
            <el-col :span="24">
              <el-row>
                <el-col>
                  <el-table class="el-tab"
                            :data="tableData"
                            border
                            size="mini"
                            style="font-size: 13px"
                            :cell-style="{height:'34px',padding:'0px'}"
                            :header-cell-style="{background:'#f5f6fa',fontWeight:'normal'}">
                    <el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
                    <el-table-column prop="name" label="领导名称" align="center" ></el-table-column>
              <!--      <el-table-column prop="research" label="领导职务" align="center" width="500"></el-table-column>-->
                    <el-table-column prop="title" label="职称" align="center" ></el-table-column>
                    <el-table-column prop="introduce" label="简介" align="center" ></el-table-column>
                    <!--    <el-table-column prop="total" width="200" label="部门人数" align="center"></el-table-column>
                       -->
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="200" align="center">
                      <template slot-scope="scope">
                        <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                        <el-button @click.native.prevent="deleteRow(scope.row.id)" type="text" size="small">删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <div class="block">
            <el-pagination align="right" style="margin-top: 5px;" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" :current-page="pageable.page+1"
                           :page-sizes="[10, 20, 30, 40]"
                           :page-size="pageable.size" layout="total, sizes, prev, pager, next, jumper"
                           :total="totalElements">
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    import Qs from 'qs';
    import moment from 'moment'
    import {MessageBox, Message} from 'element-ui';

    export default {
        name: "index",
        data() {
            return {
                //总结点id
                parentId: 0,
                type: '1',
                tableData: [],
                totalElements: 0,
                content: '',
                pageable: {
                    page: 0,
                    size: 10,
                    sort: 'id',
                    departmentId: "1"
                },
                menuTree: [],
                clickNode: false,
                defaultProps: {
                    label: 'name',
                    children: 'children'
                },
                highlightCurrent: true,
                departmentId: ''
            }
        },
        created() {
           // this.getMenus()
            this.findByParam()
        },
        watch: {
            'pageable.page': function (val) {
                this.findByParam()
            },
            'pageable.size': function (val) {
                this.findByParam()
            },
            'pageable.type': function (val) {
                this.findByParam()
            },
            'parentId': function (val) {
              //  this.getMenus();
            }
        },
        filters: {
            isKeyDepartment: function (val) {

                if (val === 1) {
                    return "是"
                } else {
                    return "否"
                }
            },
        },
        methods: {
        //树形菜单结构
         /*   getMenus: function () {
                let data = Qs.stringify({parentId: this.parentId})
                this.instance.post('/w/departments/departmentMenus', data
                ).then(data => {
                    let menus = data.data;
                    if (this.parentId === 0) {
                        this.menuTree = menus;
                    }
                })
            },*/
            // 点击节点触发的方法
            handleNodeClick: function (node) {
                this.pageable.departmentId = node.id;
                //根据节点id获取医生信息
                this.findByParam();
            },

            handleSizeChange(val) {
                this.pageable.size = val;
            },

            handleCurrentChange(val) {
                this.pageable.page = val - 1;
            },
            findByDepartmentId() {
                let that = this;
                let data = Qs.stringify(this.pageable)
                this.instance.post('/w/doctors/findByDepartmentId', data)
                    .then(function (response) {
                        that.totalElements = response.pageable.totalElements;
                        that.tableData = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            findByParam() {
                let that = this;
                let data = Qs.stringify(this.pageable)
                this.instance.post('/w/leaders/s', data)
                    .then(function (response) {
                        that.totalElements = response.pageable.totalElements;
                        that.tableData = response.data;
                    })
                    .catch(function (error) {
                    });
            },


            deleteRow(id) {
                let that = this;
                let confirm = MessageBox.confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                  that.instance.delete('/w/leaders/' + id).then(function (response) {
                        Message.success("删除成功")
                      that.findByParam()
                    })
                }).catch(() => {
                    Message.info("取消删除")
                })
            },
            handleClick(row) {

            },
            edit(row) {
                this.$router.push({name: 'leaderAdd', query: {doctor: row}}) // 只能用 name
            },
            toAdd() {
                this.$router.push({name: 'leaderAdd'}) // 只能用 name
            },
            dateFormat: function (row, column) {
                let date = row[column.property];
                if (date === undefined) {
                    return ''
                }
                return moment(date).format("YYYY-MM-DD HH:mm:ss")
            },

        }
    }
</script>

<style scoped>

</style>
